import React, { Component } from 'react';
import {
  StyleSheet, View, Modal,
} from 'react-native';
import {
  Text, Content, ListItem, Radio, Right, Left,
} from 'native-base';

const listData = [{
  id: 1,
  text: '张三',
}, {
  id: 2,
  text: '李四',
}, {
  id: 3,
  text: '王五',
}, {
  id: 4,
  text: '马六',
}, {
  id: 5,
  text: '麻子',
}];

class Select extends Component {
  defaultSetting = {
    matchFiled: 'id',
    displayField: 'text',
    selectValue: null,
    color: '#f0ad4e',
    selectedColor: '#5cb85c',
    show: false,
  }

  constructor(props) {
    super(props);
    this.state = Object.assign(props, this.props);
  }

  _getRadioList = () => {
    const list = [];
    listData.forEarch((item, index) => {
      list.push(
        <ListItem selected={false} key={index}>
          <Left>
            <Text>{item[this.state.displayField]}</Text>
          </Left>
          <Right>
            <Radio
              color={this.state.color}
              selectedColor={this.state.selectedColor}
              selected={this.state.selectValue === item[this.state.matchFiled]}
            />
          </Right>
        </ListItem>,
      );
    });
    return list;
  }

  render() {
    return (
      <Modal
        animationType="slide"
        transparent={false}
        visible={this.props.show}
        onRequestClose={() => {
          alert('Modal has been closed.');
        }}
      >
        <View style={styles.selectContainer}>
          <Content>
            {this._getRadioList()}
          </Content>
        </View>
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  selectContainer: {
    backgroundColor: 'red',
  },
});

export default Select;
